<div class="tab-pane tab-pane-global fade active show" id="id0">
    {% if error %}
      <p>{{ error }}</p>
    {% else %}

<div id="context-menu" class="dropdown-menu">
  <a id="checkNodeDataLink" class="dropdown-item" data-node-id="" data-node-name="" onclick="checkDataloaded()">Check Polling Data</a>
</div>

<div class="modal fade" id="fetchPollingDataModal" tabindex="-1" role="dialog" aria-labelledby="fetchPollingDataModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fetchDataTitle">Detail Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="display: flex; justify-content: center;">
	      <!-- <span id="modalInfo"></span> -->
	      <div id="modalInfo" class="loader"></div>

	      <!-- <span class="table-title" ><span> -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="btn-fetch-node-data" type="button" class="btn btn-primary" onclick="fetchNodeData()" data-dismiss="modal" disabled>Check Data</button>
      </div>
    </div>
  </div>
</div>

<div id="main-chart-polling-{{log_id}}"   style="width: 90%; height:80%;" ></div>

<div class="container">
<div class="row">
 <div class="col align-self-center">
 <div id="hie-pag">
  <ul class="pagination">
  </ul>
</div>
</div>
</div>
</div>

<script type="text/javascript">
var log_id = {{ log_id }}
var checkLoadedTimer = null;
// check if data is ready
function checkDataloaded(){
  var node_id = $("#checkNodeDataLink").data("node-id")
  var node_name = $("#checkNodeDataLink").data("node-name")
  $('#fetchPollingDataModal').modal('show')
  $("#modalInfo").html("")
  $("#modalInfo").addClass("loader")
  $("#btn-fetch-node-data").prop("disabled",true)
  checkLoadedTimer = setInterval(function() {
  $.get("/check_node_data_ready/"+log_id+"/"+node_id, function(data){
    console.log("Start timer to check whether data is ready.")
    // console.log(data)
    if (data['dataloaded']){
        clearInterval(checkLoadedTimer);
        console.log("Data is ready, clear timer.")
        $("#modalInfo").removeClass("loader")
        $("#modalInfo").html("Detail data is ready.")
        $("#btn-fetch-node-data").prop("disabled", false)
    }
  });
  }, 1000);
}

// fetch node data
function fetchNodeData(){
  var node_id = $("#checkNodeDataLink").data("node-id")
  var node_name = $("#checkNodeDataLink").data("node-name")
  console.log("Fetching node data: node_id->"+node_id)
  tabId='tab--polling-'+log_id+'-'+node_id;
  header="&nbsp;<span class=\"text-info tab-icon\"><i class=\"fas fa-database fa-1x\" aria-hidden=\"true\"></i></span>"+"Polling ASI Rows";
  url = '/fetch_polling_page_detail/'+log_id+"/"+node_id+"/"+node_name;
  console.log(url)
  createTab(tabId, header, url)
}

// disable timer when modal dismissed
$('#fetchPollingDataModal').on('hide.bs.modal', function (e) {
  console.log("Modal dismissed.")
  // console.log(checkLoadedTimer)
  if (checkLoadedTimer !== null){
    console.log("Clear timer.")
    clearInterval(checkLoadedTimer);
  }
});


// Disable default context menu
document.oncontextmenu = function () { return false; }; 

// fetch hierachical data for tree map.
$.get("/fetch_polling_json/{{log_id}}", function(data){
  // build pagination according to hierachy data.
  var buildPag = function(item, index) {
    $("#hie-pag ul").append("<li class=\"page-item\"><a class=\"page-link\">"+item+"</a></li>")
  }

  var switchData = function(k){
    var myChart = echarts.init(document.getElementById('main-chart-polling-{{log_id}}'));
    myChart.setOption(option={series:[{data: [data[k]]}]});
    console.log("Switch data to "+k);
  }
	

  var myChart = echarts.init(document.getElementById('main-chart-polling-{{log_id}}'));
  var weekdays = Object.keys(data);
  weekdays.forEach(buildPag)
	myChart.setOption(option = {
        <!-- tooltip: { -->
        <!--     trigger: 'item', -->
        <!--     triggerOn: 'mousemove' -->
        <!-- }, -->
		
        series:[
            {
                type: 'tree',
                data: [data[weekdays[0]]],
                left: '8%',
                right: '2%',
                top: '13%',
                bottom: '20%',
				height:'60%',
	        <!-- layout: 'radial', -->
                initialTreeDepth: 1,
                symbol: 'image:///static/img/db.svg' ,
                symbolSize: 50,
                orient: 'vertical',
                expandAndCollapse: true,
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left',
					rotate: -45,
                    fontSize: 12,
		            offset: [0, 0],
                    fontWeight: 'bold',
                },

                leaves: {
                    symbolSize: 15,
                    label: {
                        position: 'top',
                        rotate: 45,
                        align: 'left',
                        fontSize:10,
		                offset: [0, 0],
                    }, 
                },

                <!-- animationDurationUpdate: 750 -->
            }
        ]
    });

  // show context menu
  var showMenu = function(params){
    var e = params.event.event;
    var node_data = params.data;
    var node_id = node_data.node_id;
    var node_name = node_data.node_name;
    console.log("Node-name:"+node_name)
    $("#checkNodeDataLink").data("node-id", node_id)
    $("#checkNodeDataLink").data("node-name", node_name)
    $("#context-menu").css({
      display: "block",
      left: e.offsetX+20+'px',
      top: e.offsetY+'px'
    });
  }
  // hide context menu
  var hideMenu = function(){
    if(document.getElementById("context-menu")){
      document.getElementById("context-menu").style.display = "none";
    }
  };

  // bind right click event on mychart
  myChart.on('contextmenu', function (params) {
    // console.log(params)
    showMenu(params);
    window.document.onclick = function(){
      hideMenu()
    }
  });

  // switch data between different weekdays
 $("#hie-pag ul").on("click", 
  function(e){
    data_key=$(e.target).html()
    // WA: Use html content for key selection
    switchData(data_key)
  })

})

</script>

{% endif %}

</div>
